<template>
	<view @click="onAnserItemClick()" class="answer-item">
		<!-- 答主 -->
		<view class="answer-user">
			<!-- 头像 -->
			<view class="answer-user-avatar">
				<image 
				class="answer-user-avatar-image"
				mode="aspectFill"
				:src="answerAvatar"
				/>
			</view>
			<!-- 用户名 -->
			<view class="answer-user-username">
				<text>{{answerUsername}}</text>
			</view>
			<!-- 用户徽标 -->
			<view class="answer-user-badges-content">
				
			</view>
		</view>
		<!-- 回答内容体 -->
		<view class="answer-content">
			<!-- 图片/视频 -->
			<view v-if="answerImage" class="answer-image-content">
				<image mode="aspectFill"
				class="answer-image"
				:src="answerImage"
				></image>
				<view v-show="hadVideo" class="play-icon-content">
					<uni-icons customPrefix="customicons" type="videocam-filled" color="#c5c5c5dc" size="80" />
				</view>
			</view>
			<!-- 文字 -->
			<view class="answer-content-text">
				<text>{{answerText}}</text>
			</view>
		</view>
		<!-- 底部 -->
		<view class="answer-footer">
			<view class="answer-footer-text">
				<text>{{answerAgreeSum}} 赞同 · {{answerCommentSum}} 评论 · {{publishTime}}</text>
			</view>
			<view @click.stop="moreClick" class="more">
				<view class="iconfont icon-ellipsis" :style="{
					 fontSize: '25px',
					 color: '#b4b4b4'
				}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import textFilter from '@/utils/textFilter';
	import {
		GettimeifferenceOfNow
	} from "@/utils/dateUtils";
	import {
		AnonymousAvatar,
		avatar_pic_hendle
	} from '@/common/constants';
	/**
	 * answerItem 答案的单个组件
	 * @description: 答案的单个组件
	 * @Author: 穆兰
	 * @Date: 2022/2/8
	 * @LastEditors: 穆兰
	 * @LastEditTime: 2022/2/12
	 * @param {Object} 回答数据  
	 * @event {Function()} click 点击回答
	 * @event {Function()} moreClick 点击回答的更多按钮  
	 */
	export default {
		name:"answer-item",
		props:{
			answerData:{
				type:Object,
				required:true
			}
		},
		emits:['click','moreClick'],
		computed:{
			answerAvatar(){
				if(!this.answerData){
					return ''
				}else{
					if(this.answerData.issueComment.isAnony==1){
						return AnonymousAvatar
					}else{
						if(this.answerData.user){
							return this.answerData.user.avatar+avatar_pic_hendle
						}else{
							return ''
						}
						
					}
				}
			},
			answerUsername(){
				if(!this.answerData){
					return ''
				}else{
					if(this.answerData.issueComment.isAnony==1){
						return '某只小布咕'
					}else{
						if(this.answerData.user){
							return this.answerData.user.username
						}else{
							return ''
						}
						
					}
				}
			},
			// 是否含有视频，若含有视频则头图显示视频
			hadVideo(){
				if(!this.answerData){
					return false
				}else{
					if(this.answerData.issueComment.videoPaths){
						return true
					}else{
						return false
					}
				}
			},
			answerImage(){
				if(!this.answerData){
					return ''
				}else{
					if(this.answerData.issueComment.videoPaths){
						return this.answerData.issueComment.videoPaths[0]+'?vframe/jpg/offset/0'
					}
					if(this.answerData.issueComment.imgPaths){
						
						return this.answerData.issueComment.imgPaths[0]
					}else{
						return ''
					}
				}
			},
			answerText(){
				let text = this.answerData.issueComment.content
				
				let realMaxLength=65
				let maxLength = 65
				//一个换成换算成20个字符串，最后只能有70个字符位，多了就要收起
				let line_breaks = 0
				let transformTextLength =0
				let textMatch = text.match(/\n/ig)
				if (textMatch) {
					line_breaks = textMatch.length
				}
				if (line_breaks <= 0) {
					transformTextLength = text.length
				} else {
					transformTextLength = text.length + line_breaks * 19
					if (transformTextLength > maxLength) {
						let times = 1
						let first_break = text.indexOf('\n')
						let temp_break = first_break //临时长度 将一个换行换成20长度
						let real_break = first_break //真实长度，一个换行为一个长度
						let temp_text = text
						while (temp_break < maxLength) {
							temp_text = text.slice(real_break + 1)
							if (temp_text.indexOf('\n') == -1) {
								break
							}
							temp_break = temp_break + 20 + temp_text.indexOf('\n')
							real_break = real_break + 1 + temp_text.indexOf('\n')
							times = times + 1
							
						}
						if(real_break<maxLength){
							realMaxLength = real_break
						}
						
					}
				}
				let showAll = transformTextLength <= realMaxLength //换算后的文字长度小于100则转换成真实长度
				
				if(showAll){
					return textFilter(this.answerData.issueComment.content)
				}else{
					return textFilter(this.answerData.issueComment.content).slice(0, realMaxLength) + '...'
				}
			},
			answerAgreeSum(){
				if(!this.answerData){
					return 0
				}else{
					if(this.answerData.issueComment.likeSum<1000){
						return this.answerData.issueComment.likeSum
					}else{
						return this.answerData.issueComment.likeSum/1000+'K'
					}
					
				}
			},
			answerCommentSum(){
				if(!this.answerData){
					return 0
				}else{
					if(this.answerData.issueComment.responseSum<1000){
						return this.answerData.issueComment.responseSum
					}else{
						return this.answerData.issueComment.responseSum/1000+'K'
					}
					
				}
			},
			publishTime(){
				if(!this.answerData){
					return ''
				}else{
					
					return GettimeifferenceOfNow(this.answerData.issueComment.createTime).DistanceNow
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * @description 点击回答主体
			 */
			onAnserItemClick(){
				this.$emit('click')
			},
			/**
			 * @description 点击更多按钮
			 */
			moreClick(){
				this.$emit('moreClick')
			}
		}
	}
</script>

<style lang="scss">
	.answer-item{
		 background-color: #FFFFFF;
		 width: 94%;
		 padding: 3%;
		 margin-bottom: 10rpx;
		 .answer-user{
			 display: flex;
			 align-items: center;
			 justify-content: flex-start;
			 text-align: left;
			 .answer-user-avatar{
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 .answer-user-avatar-image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx; 
				 }
			 }
			 .answer-user-username{
			 	margin-left: 15rpx;
			 	color: #838383;
			 	font-size: small;
			 }
		 }
		 .answer-content{
			 .answer-image-content{
				 position: relative;
				 width: 100%;
				 height: 50vw;
				 .answer-image{
					 background-color: #EDEDED;
					 margin-top: 15rpx;
					 width: 100%;
					 height: 50vw;
					 border-radius: 10rpx;
				 }
				 .play-icon-content{
				 	position: absolute;
				 	top: 50%;
				 	left: 50%;
				 	transform: translateX(-40px) translateY(-30px);
				 	
				 }
			 }
			 
			 .answer-content-text{
				 letter-spacing: 3rpx;
				 margin-top: 20rpx;
				 font-size: 28rpx;
				 color: #454545;
			 }
		 }
		 .answer-footer{
			 margin-top: 15rpx;
			 color: #A5A5A5;
			 font-size: 26rpx;
			 display: flex;
			 text-align: left;
			 align-items: center;
			 .answer-footer-text{
				 flex-grow: 1;
			 }
		 }
	}
</style>
